<template>
	<div>
		<y-shelf v-bind:title="orderTitle">
			<div slot="content">
				<div v-loading="loading" element-loading-text="加载中..." style="min-height: 10vw;" v-if="orderList.length">

					<!--商品-->
					<div class="goods-table">
						<div class="cart-items" v-for="(item,i) in orderList" :key="i">
							<a @click="goodsDetails(item.productId)" class="img-box"><img :src="root + item.ImgPath" alt=""></a>
							<div class="name-cell ellipsis" style="width: 400px;">
								<a @click="goodsDetails(item.productId)" title="" target="_blank">{{item.ProductName}}</a>
							</div>
							<div class="n-b">
								<div class="price">¥ {{item.SalePrice}}</div>
								<div class="goods-num">{{Quantity}}</div>
								<div class="subtotal"> ¥ {{item.SalePrice * Quantity}}</div>
							</div>
						</div>
					</div>

					<div class="gray-sub-title cart-title">
						<div class="first">
							<div>
								<span class="order-id">评价订单</span>
							</div>
						</div>
					</div>
					<div style="height: 210px;padding: 20px 30px;">
						<p style="margin-bottom: 10px;">
							<el-rate v-model="rateValue3" show-text>
							</el-rate>
						</p>
						<p>
							<textarea v-model="rateText" placeholder="亲，写点评价吧，您的评价对大家有很大帮助的" style="width: 100%; height: 90px;padding: 10px;margin-bottom: 10px;"></textarea>
						</p>
						<y-button style="width: 140px;height: 40px;line-height: 40px" text="提交评价" classStyle="main-btn" @btnClick="commitRate">
						</y-button>
					</div>
				</div>
				<div v-loading="loading" element-loading-text="加载中..." v-else>
					<div style="padding: 100px 0;text-align: center">
						获取该订单信息失败
					</div>
				</div>
			</div>
		</y-shelf>

	</div>
</template>
<script>
	import YButton from '/components/YButton'
	import { getOrderDet, cancelOrder, rateOrder } from '/api/goods'
	import YShelf from '/components/shelf'
	import { getStore } from '/utils/storage'
	import countDown from '/components/countDown'
	export default {
		data() {
			return {
				orderList: [0],
				orderId: '',
				userName: '',
				tel: '',
				streetName: '',
				orderTitle: '',
				createTime: '',
				payTime: '',
				closeTime: '',
				finishTime: '',
				orderTotal: '',
				loading: false,
				countTime: 0,
				Quantity: 0,
				rateValue3: null,
				rateText: ''

			}
		},
		methods: {
			_getOrderDet() {
				getOrderDet(this.orderId).then(res => {
					console.log('根据订单id获取订单信息res', res)
					this.orderList = res.data.list[0].ProductsList
					this.Quantity = res.data.list[0].Quantity
					this.orderTotal = res.data.list[0].GoodsTotal
					this.userName = res.data.list[0].ReceiverName
					this.tel = res.data.list[0].ReceiverPhone
					this.streetName = res.data.list[0].AddrProvince + res.data.list[0].AddrCity + res.data.list[0].AddrArea + res.data.list[0].AddrDetail
					this.createTime = res.data.list[0].CreateDate
					this.payTime = res.data.list[0].PayDate
					this.loading = false
				})
			},
			commitRate() {
				let me = this
				let ProductId = null
				let SkuId = null
				for(var i=0; i<me.orderList.length; i++) {
					ProductId = me.orderList[0].ProductId
					SkuId = me.orderList[0].SkuId
				}
				me.rateValue3
				console.log('this.rateValue3', me.rateValue3)
				console.log('this.rateText', me.rateText)
				rateOrder({
					OrderId: me.orderId,
					ProductId: ProductId,
					SkuId: SkuId,
					ReviewContent: me.rateText,
					ReviewMark: me.rateValue3,
				}).then(res => {
					console.log('评价订单返回res', res)
					if(res.code === 200) {
						me.$message({	
							message: res.data,
							type: 'success'
						})
						setTimeout(function(){
							me.$router.go(-1)
						}, 1500)
					}else {
						me.$message({	
							message: res.error,
							type: 'error'
						})
					}
				})

			}
		},
		created() {
			this.orderId = this.$route.query.orderId
			this.orderTitle = '订单号：' + this.orderId
			this._getOrderDet()
		},
		components: {
			YButton,
			YShelf,
			countDown
		}
	}
</script>
<style lang="scss" scoped>
	@import "../../../assets/style/mixin";
	.orderStatus {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin: 50px -150px 20px 60px;
	}
	
	.orderStatus-close {
		display: flex;
		align-items: center;
		flex-direction: row;
		margin: 50px -800px 20px 60px;
	}
	
	.status-now {
		background: #F6F6F6;
		border: 1px solid #dadada;
		border-radius: 5px;
		padding: 22px 30px 20px;
		margin: 0 30px 30px 30px;
		line-height: 38px;
	}
	
	.status-title {
		font-size: 18px;
		color: #666;
	}
	
	.button {
		float: right;
		margin: -37px 0 20px 0;
	}
	
	.realtime {
		border-top: 1px solid #dcdcdc;
		margin-top: 20px;
		padding-top: 26px;
	}
	
	.red {
		color: #d44d44;
	}
	
	.address {
		line-height: 38px;
		word-wrap: break-word;
		word-spacing: normal;
		word-break: break-all;
		color: #626262;
	}
	
	.img-box {
		border: 1px solid #EBEBEB;
		margin-left: -80px;
	}
	
	img {
		display: block;
		@include wh(80px);
	}
	
	.goods-table {
		.n-b {
			display: flex;
			align-items: center;
			justify-content: center;
			>div {
				color: #626262;
				font-weight: 700;
				width: 150px;
				text-align: center;
			}
		}
		.cart-items {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 110px;
			padding: 15px 0 15px 111px;
			border-bottom: 1px solid #EFEFEF;
			a {
				color: #333;
			}
		}
		.price {
			padding-left: 107px;
		}
		.goods-num {
			padding-left: 60px;
		}
	}
	
	.order-discount-line {
		padding: 22px 30px 20px;
		line-height: 24px;
		text-align: right;
		font-size: 12px;
		&:first-child {
			line-height: 32px;
			text-align: right;
			font-size: 14px;
			font-weight: bolder;
		}
	}
	
	.gray-sub-title {
		height: 38px;
		padding: 0 24px;
		background: #EEE;
		border-top: 1px solid #DBDBDB;
		border-bottom: 1px solid #DBDBDB;
		line-height: 38px;
		font-size: 12px;
		color: #666;
		display: flex;
		span {
			display: inline-block;
			height: 100%;
		}
		.first {
			display: flex;
			justify-content: space-between;
			flex: 1;
			.f-bc {
				>span {
					width: 112px;
					text-align: center;
				}
			}
		}
		.last {
			width: 230px;
			text-align: center;
			display: flex;
			border-left: 1px solid #ccc;
			span {
				flex: 1;
			}
		}
	}
	
	.bt {
		border-top: 1px solid #EFEFEF;
	}
	
	.date {
		padding-left: 0px;
	}
	
	.order-id {
		margin-left: 10px;
	}
	
	.cart {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24px;
		&:hover {
			.del-order {
				display: block;
			}
		}
		.del-order {
			display: none;
		}
		.cart-l {
			display: flex;
			align-items: center;
			flex: 1;
			padding: 15px 0;
			justify-content: space-between;
			position: relative;
			&:before {
				position: absolute;
				content: ' ';
				right: -1px;
				top: 0;
				width: 1px;
				background-color: #EFEFEF;
				height: 100%;
			}
			.ellipsis {
				margin-left: 20px;
				width: 220px;
			}
			.img-box {
				border: 1px solid #EBEBEB;
			}
			img {
				display: block;
				@include wh(80px);
			}
			.cart-l-r {
				display: flex;
				>div {
					text-align: center;
					width: 112px;
				}
			}
			.car-l-l {
				display: flex;
				align-items: center;
			}
		}
		.cart-r {
			width: 230px;
			display: flex;
			span {
				text-align: center;
				flex: 1;
			}
		}
	}
	
	.prod-operation {
		height: 110px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 254px;
		div {
			width: 100%;
			text-align: center;
		}
		div:last-child {
			padding-right: 24px;
		}
	}
	
	.price-total {
		height: 54px;
		line-height: 54px;
		font-size: 18px;
	}
	
	.price-red {
		font-weight: 700;
		color: #d44d44;
	}
</style>